<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/site.css">
<link rel="stylesheet" type="text/css"
	href="../css/redmond/jquery-ui-1.8.23.custom.css">
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
	src="../js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<!-- 验证控件中文 -->
<script type="text/javascript" src="../js/messages_cn.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	$(function(){
		
		//受热面切换
		$("#menu li").click(
				function() {
					$(this).parent().find("li").removeClass("tabFocus");
					$(this).addClass("tabFocus");
					$(this).parent().parent().next().find("li").removeClass(
							"conFocus");
					$(this).parent().parent().next().find(
							"li:eq(" + $(this).index() + ")").addClass(
							"conFocus");
					var iframe = $(this).parent().parent().next().find(
							"li:eq(" + $(this).index() + ") iframe");
					iframe.attr("src",iframe.attr("src"));
					
		});
		$("#but").click(function(){
			var tubeId = $("select[id='tube']").val();
			var begin = $("#begin").val();
			var end = $("#end").val();
			var queryStr = "?tubeId="+tubeId+"&begin="+begin+"&end="+end;
			$("iframe[id='diameterXTime']").attr("src","diameterXTime.do"+queryStr);
			$("iframe[id='diameterYTime']").attr("src","diameterYTime.do"+queryStr);
			$("iframe[id='creepXTime']").attr("src","creepXTime.do"+queryStr);
			$("iframe[id='creepYTime']").attr("src","creepYTime.do"+queryStr);
			$("iframe[id='wallThickTime']").attr("src","wallThickTime.do"+queryStr);
			$("iframe[id='wearRateTime']").attr("src","wearRateTime.do"+queryStr);
			$("iframe[id='lifetimeTime']").attr("src","lifetimeTime.do"+queryStr);
		});
	});
	function ajax() {
		var obj=document.getElementById("boiler");
		$("#surface").html("<option value='0'>请选择</option>");
		$("#row").html("<option value='0'>请选择</option>");
		$("#tube").html("<option value='0'>请选择</option>");
		$("#position").html("<option value='0'>请选择</option>");
		   if(obj.options[obj.selectedIndex].value!=0){
			
			var url = 'querySurface.do?parentid='+obj.options[obj.selectedIndex].value+"&a="+new Date();
			$.getJSON(url, function(data) {
				$.each(data,function(key,value){
					$("#surface").append("<option value="+key+">"+value+"</option>");
				});
			});
		   }
	}
	function surface_ajax() {
		var obj=document.getElementById("surface");
		$("#row").html("<option value='0'>请选择</option>");
		$("#tube").html("<option value='0'>请选择</option>");
		$("#position").html("<option value='0'>请选择</option>");
			
		   if(obj.options[obj.selectedIndex].value!=0){
			var url = 'queryRows.do?parentid='+obj.options[obj.selectedIndex].value+"&a="+new Date();
			$.getJSON(url, function(data) {
				$.each(data,function(key,value){
					$("#row").append("<option value="+key+">"+value+"</option>");
				});
			});
		   }
	}
	function row_ajax() {
		 var obj=document.getElementById("row");
		 $("#tube").html("<option value='0'>请选择</option>");
		 $("#position").html("<option value='0'>请选择</option>");
		 
		   if(obj.options[obj.selectedIndex].value!=0){
			
			var url = 'queryTube.do?parentid='+obj.options[obj.selectedIndex].value+"&a="+new Date();
			$.getJSON(url, function(data) {
				$.each(data,function(key,value){
					$("#tube").append("<option value="+key+">"+value+"</option>");
				});
			});
		   }
	}
	
	function position_ajax() {
		 var obj=document.getElementById("tube");
		 $("#position").html("<option value='0'>请选择</option>");
		 
		   if(obj.options[obj.selectedIndex].value!=0){
			
			var url = 'queryPosition.do?tubeid='+obj.options[obj.selectedIndex].value+"&a="+new Date();
			$.getJSON(url, function(data) {
				$.each(data,function(key,value){
					$("#position").append("<option value="+key+">"+value+"</option>");
				});
			});
		   }
	}
</script>
<style type="text/css">
menu ul,li {
	margin: 0;
	padding: 0;
	list-style: none
}

#menu li {
	text-align: center;
	float: left;
	padding: 5px;
	margin-right: 2px;
	cursor: pointer
}

#menu li.tabFocus {
	border: solid 1px #cdd7e0;
	border-bottom: 0;
	z-index: 100;
	position: relative
}

#content {
	height: 100%;
	padding: 10px;;
	clear: left;
	border: solid 1px #cdd7e0;
	position: relative;
	top: -1px
}

#content li {
	display: none
}

#content li.conFocus {
	display: block
}
</style>
</head>

<body>
<body>
	<div id="maintabs">
		<ul>
			<li><a href="#maintabs-1">劣化分析</a></li>
		</ul>
		<div id="maintabs-1">
			<!-- 内容区 开始 -->
			<div>
					<table class="wenyuan btntable">
						<tr>
							<td>
								<select name="boiler" id="boiler" onchange="ajax();">
										<option value="0">--请选择--</option>
										<c:forEach items="${requestScope.boilers }" var="record"
											varStatus="s">
											<option value="${record.id}">${record.name}</option>
										</c:forEach>
								</select> 
								<select id="surface" onchange="surface_ajax();">
										<option value="0">--请选择--</option>
								</select> 
								<select id="row" onchange="row_ajax();">
										<option value="0">--请选择--</option>
								</select> 
								<select id="tube"  name="tubeId">
										<option value="0">--请选择--</option>
								</select> 
								<!-- <select id="position" name="positionId">
										<option value="0">--请选择--</option>
								</select>  -->
								<label class="small" for="title">开始时间</label> <input id="begin"
								name="begin" type="text" value="${param.begin }"
								onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
								class="time" /> 
								<label class="small" for="title">至</label> <input
								id="end" name="end" type="text" value="${param.end }"
								onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
								class="time" /> 
								<input type="button" id="but" class="butDef" value="确定"/>
								<br>


								<div style="margin-top: 20px" class="demo">
									<div id="menu">
										<ul>
											<li class="tabFocus">外径横向</li>
											<li>外径纵向</li>
											<li>相对蠕脹横向</li>
											<li>相对蠕脹纵向</li>
											<li>实测壁厚</li>
											<li>磨损速率</li>
											<li>估算寿命</li>
										</ul>
									</div>
									<div id="content">
										<ul>
											<li class="conFocus" title="外径横向">
												<iframe id="diameterXTime" frameborder="0" src="" style="width: 100%; height: 370px"></iframe></li>
											<li title="外径纵向">
												<iframe id="diameterYTime" frameborder="0" src="" style="width: 100%; height: 370px" style="width: 100%; height: 370px"></iframe>
											</li>
											<li title="相对蠕脹横向">
												<iframe id="creepXTime" frameborder="0" src="" style="width: 100%; height: 370px" style="width: 100%; height: 370px"></iframe>
											</li>
											<li title="相对蠕脹纵向">
												<iframe id="creepYTime" frameborder="0" src="" style="width: 100%; height: 370px" style="width: 100%; height: 370px"></iframe>
											</li>
											<li title="实测壁厚">
												<iframe id="wallThickTime" frameborder="0" src="" style="width: 100%; height: 370px" style="width: 100%; height: 370px"></iframe>
											</li>
											<li title="磨损速率">
												<iframe id="wearRateTime" frameborder="0" src="" style="width: 100%; height: 370px" style="width: 100%; height: 370px"></iframe>
											</li>
											<li title="估算寿命">
												<iframe id="lifetimeTime" frameborder="0" src="" style="width: 100%; height: 370px" style="width: 100%; height: 370px"></iframe>
											</li>
										</ul>
									</div>
								</div></td>
						</tr>
					</table>
			</div>
		</div>
	</div>

</body>
</body>
</html>
